
<template>
  <div class="wrap" style="padding: 15px">
    <el-row>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="畅玩卡名称">
          <el-input
            clearable
            v-model="queryParams.cardName"
            placeholder="名称"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-button type="primary" style="margin-bottom: 15px" @click="addGiftCard"
      >新增</el-button
    >

    <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
      <el-table-column label="卡名称" prop="cardName"></el-table-column>
      <el-table-column label="场馆" >
       <p>九一体育馆</p>
      </el-table-column>

      <el-table-column label="场区" prop="regionName"></el-table-column>
      <el-table-column label="活动价" prop="salePrice"></el-table-column>
      <el-table-column label="场次类型" prop="cardType">
       <template slot-scope="scope">
        {{setCard(scope.row.cardType)}}
       </template>
      </el-table-column>

      <el-table-column label="使用时间">
        <template slot-scope="scope">
          {{
            !scope.row.cardStartTime || !scope.row.cardEndTime
              ? ""
              : scope.row.cardStartTime + " ~ " + scope.row.cardEndTime
          }}
        </template>
      </el-table-column>
      <el-table-column label="使用天数" prop="days"></el-table-column>

      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right; justify-content: flex-end">
      <el-pagination
        @size-change="getData"
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <AddCard ref="addCard" />
  </div>
</template>
<script>
import { dailyCardDel, dailyCardpageList, dailyCardShow } from '@/config/api'
import { times, divide } from "@/utils/tools"
import AddCard from "./addCard.vue"
export default {
  components: {
    AddCard
  },
  data () {
    return {
      queryParams: {
        cardName: undefined,
        page: 1,
        pageSize: 10,
      },
      tableData: [],
      levelList: [],
      total: 0,
      loading: false,
      balance: {},
      dialogFormVisible: false
    };
  },

  created () {

    this.getData()
  },
  methods: {
    // 新增卡
    addGiftCard () {
      this.$refs.addCard.addShow()
    },
    del (record) {
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       dailyCardDel({ id: record.id }).then(res => {
          this.getData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    getData () {
     dailyCardpageList(this.queryParams).then(res => {
        res.data.result.list.map(item => {
         if(item.salePrice){
          item.salePrice = divide(item.salePrice, 100)

         }
        })
        this.tableData = res.data.result.list
        this.total = res.data.result.total
      })
    },
    edit (record) {
     dailyCardShow({ id: record.id }).then(res => {
        this.$refs.addCard.editShow(res.data.result)
      })
    },
    setCard(type){
     let str = ""
     switch(type){
      case "0":
      str = "全天"
      break;
      case "1":
      str = "早"
      break;
      case "2":
      str = "中"
      break;
      case "3":
      str = "晚"
      break;
     }
     return str
    }


  },
};
</script>
<style lang="scss" scoped>
.block {
  display: flex;
  margin: 15px 0;
  p {
    font-size: 18px;
    font-weight: bold;
    margin-right: 50px;
  }
}
</style>